<template>
	<div class="body_inner">

		<div class="withdraw_apply_page">
			<div class="header">
				<a href="/main" class="logo"><img src="../assets/img/icon/logo.png" alt=""></a>

				<div class="allMenu_btn" v-if="!allMenuShow" @click="allMenuShow = true">
					<div class="x"></div>
					<div class="y"></div>
					<div class="z"></div>
				</div>
				<div class="allMenu_btn open" v-if="allMenuShow" @click="allMenuShow = false">
					<div class="x coll rotate30 rotate45"></div>
					<div class="y coll" style="display: none;"></div>
					<div class="z coll rotate150 rotate135"></div>
				</div>
			</div>

			<div class="accountMenu">
				<div class="info">
					<div class="left">
						<img src="../assets/img/icon/m_master.png" alt="" v-if="is_master == 1">
						<p class="name">{{indeData.user_no}}</p>
						<p class="name" id="copyText" style="position: absolute;z-index: -1;opacity: 0;">{{'https://test.pdt-daily.com/join?referno=' + indeData.user_no}}</p>
					</div>

					<div class="right">
						<button type="button" class="copy" data-clipboard-target="#copyText"><i
								class="xi-documents-o"></i></button>
						<button type="button" class="open_modal" @click="addAcount()"><i class="xi-plus"></i></button>
						<button type="button" class="open_modal_2" @click="allAccount = !allAccount"><i
								class="xi-caret-down-min"></i></button>
					</div>
				</div>

				<div id="accountPlus" v-if="allAccount">
					<ul>
						<li v-for="(value,index) in accountList" :key="index"><a>{{value.user_no}} <i class="xi-repeat"
									@click="swichAccount(index)"></i></a></li>
					</ul>

					<button type="button" class="open_modal"><i class="xi-plus" @click="addAcount()"></i>계정 추가</button>
				</div>

				<div class="contents">
					<div class="refresh" @click="getInfo()"><i class="xi-refresh"></i></div>

					<div class="img"><img src="../assets/img/icon/coin_symbol.png" alt=""></div>
					<p class="title"><b>${{info.self_buy_price}}</b></p>

					<div class="rate">
						<div class="balance">
							<p>잔액</p>
							<b>{{info.now_usdt_pdt}}<span>PDT</span></b>
							<!-- (${{info.now_usdt}}) -->
						</div>
					</div>
				</div>
			</div>

			<section class="sec01">
				<form action="" class="form_boundary">
					<div class="btns">
						<div :class="type == 1?'btn sec01_btn on':'btn sec01_btn'" @click="type = 1">출금신청</div>
						<div :class="type == 2?'btn sec01_btn on':'btn sec01_btn'" @click="type = 2">계정간 송금</div>
					</div>
					<!-- 提现 -->
					<div v-if="type == 1" class="page_contents">
						<h3>출금정보</h3>
						<div>
							<p class="title_btn_group">출금 수량 <button type="button" @click="allIn()">전체 수량</button></p>
							<div class="money">
								<div class="money_form_group">
									<input type="number" v-model="withNum" style="position: relative;z-index: 99999;" @input="changeNum(withNum,info.now_usdt_pdt)">
									<span>PDT</span>
									<!-- (${{info.now_usdt}}) -->
								</div>
							</div>
						</div>

						<div>
							<p>출금 주소</p>
							<input type="text" placeholder="출금하실 지갑주소를 입력해주세요." v-model="address" style="position: relative;z-index: 99999;" >
						</div>
						<div>
							<p>이메일(필수)</p>
							<input type="email" v-model="email" disabled>
							<div style="width: 100%;display: flex;justify-content: flex-end;">
								<div type="button" class="btn open_modal" @click="getCode()" style="width: 30%;">인증요청</div>
							</div>
						</div>

						<div>
							<p>출금 수수료</p>
							<input class="charge" :value="commission + ' PDT'">
						</div>

						<div>
							<p>이용약관</p>
							<div class="user_agreements">
								<p>출금 수수료는 출금 신청 PDT 수량의 5% 고정입니다.</p>
								<p>보유하고 계신 PDT 수량안에서 출금하실 수 있습니다.</p>
								<p>출금 수량 입력은 소수점 아래 4자리 까지만 가능합니다.</p>
								<p>출금이 처리되면 출금신청 수량에서 수수료를 뺀 수량이 출금하신 지갑으로 입금됩니다.</p>
								<p>출금 신청은 매일 24시간 가능하며 출금 신청 후 시스템에 따라 순차적으로 처리 됩니다.</p>
							</div>
						</div>

						<div class="btn apply_btn" @click="Withdrawal()">출금</div>
					</div>
					<!-- 转账 -->
					<div v-if="type == 2">
						<div>
							<p>송금할 대상 ID</p>
							<input type="text" placeholder="" v-model="zId">
						</div>
						<div>
							<p>송금할 수량</p>
							<input type="number" placeholder="" v-model="zNum" @input="changeNum(zNum,info.now_usdt_pdt)" >
						</div>
						
						<div>
							<p>이메일(필수)</p>
							<input type="email" v-model="email" disabled>
							<div style="width: 100%;display: flex;justify-content: flex-end;">
								<div type="button" class="btn open_modal" @click="getCode()" style="width: 30%;">인증요청</div>
							</div>
						</div>
						<div class="btn apply_btn" @click="zhuanzhang()">송금</div>
					</div>
				</form>
			</section>

			<!-- <section class="sec02">
				<form action="" class="form_boundary">
					<div class="btns">
						<button class="btn sec01_btn">출금신청</button>
						<button type="button" class="btn sec02_btn on">계정간 송금</button>
					</div>

					<div>
						<p>송금할 대상 ID</p>
						<input type="text">
					</div>

					<div>
						<p>송금할 수량</p>
						<input type="number">
					</div>

					<button class="btn finish_btn">송금</button>
				</form>
			</section> -->

			<!-- <ul class="footer">
				<li><a href="/main"><i class="xi-home"></i>홈</a></li>
				<li><a href="/withdraw_apply"><i class="xi-money"></i>출금신청</a></li>
				<li><a href="/interest"><i class="xi-piggy-bank"></i>데일리내역</a></li>
				<li><a href="/staking"><img src="../assets/img/icon/staking_icon.png" alt="">상품 구매</a></li>
			</ul> -->
		</div>

		<nav id="allMenu" v-if="allMenuShow">
			<ul>
				<li>
					<a href="/main">
						<p><i class="xi-home"></i>홈</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking">
						<p><i class="xi-bank"></i>상품 구매</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking_sum">
						<p><i class="xi-credit-card"></i>상품 구매 합계</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/interest">
						<p><i class="xi-piggy-bank"></i>데일리내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_apply">
						<p><i class="xi-money"></i>출금신청</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_list">
						<p><i class="xi-wallet"></i>출금/송금내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/recommender">
						<p><i class="xi-group"></i>추천인 목록</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/mypage">
						<p><i class="xi-profile-o"></i>마이페이지</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>
			</ul>

			<div class="btn" @click="logout()">로그아웃</div>
		</nav>

		<div id="recommenderModal" class="modal" v-if="showModel">
			<div class="modal_body">
				<h3>추가계정 <span>{{next_account}}</span> 을(를) <br>추가 하시겠습니까?</h3>

				<button class="btn finish_btn" @click="creatAccount()">추가</button>
				<button type="button" class="btn close_btn" @click="showModel = false">닫기</button>
			</div>
		</div>

		<div v-if="loading"
			style="width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);position: fixed;top: 0;bottom: 0;z-index: 999999;">
			<div id="appLoading" class="loading-model">
				<div class="loading"></div>
			</div>
		</div>
		<div id="joinModal" class="modal" v-if="showModel">
			<div class="modal_body">
				<div action="" class="form_boundary">
					<section class="sec01">
						<div class="top">
							<img src="../assets/img/icon/message.png" alt="">
							<h3>
								<span>인증번호</span>가 발송되었습니다.
								<p>인증코드를 입력해주세요.</p>
							</h3>
						</div>
		
						<div class="bottom">
							<p>인증번호 입력</p>
							<input type="number" v-model="yanzhengma">
							<a href="#." class="btn next_btn" @click="validate">인증확인</a>
							<button type="button" class="btn close_btn" @click="showModel=false">닫기</button>
						</div>
					</section>
		
					<section class="sec02">
						<img src="../assets/img/icon/finish_icon.png" alt="">
						<h3>인증이 완료되었습니다.</h3>
						<button class="btn finish_btn">완료</button>
					</section>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import axios from "axios";
	export default {
		data() {
			return {
				showModel: false,
				indeData: {},
				is_master: null,
				accountList: [],
				next_account: '',
				allAccount: false,
				info: {
					is_master: null,
					max_proportion: null,
					next_account: "",
					now_proportion: 0,
					now_reward: "",
					now_reward_pdt: "",
					now_usdt: "",
					now_usdt_pdt: "",
					pdt: "",
					self_buy_price: "",
				},
				goodList: [],
				loading: false,
				withNum: '',
				commission: '',
				address: '',
				loading: false,
				type:1,
				zId:'',
				zNum:'',
				allMenuShow: false,
				email:'',
				yanzhengma:''
			};
		},
		computed: {
			commission() {
				return (Number(this.withNum) * 0.05).toFixed(6);
			},
		},
		created() {},
		mounted() {
			this.getInfo();
		},
		methods: {
			// 提现或转账数量监听
			changeNum(val1,val2){
				// console.log(val1,val2,5555555555)
				// console.log(val1 > val2)
				if(val1 > val2){
					
					alert('수량이 초과 되었습니다');
				}
			},
			validate(){
				if(this.type == 2){
					// 转账验证
					this.zhuanzhangBefore()
				} else {
					// 提现验证
					this.WithdrawalBefore()
				}
			},
			
			// 转账之前的验证接口
			zhuanzhangBefore(){
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/transfer/transfer_account1', {
					price: _this.zNum,
					user_no: _this.zId,
					email:_this.email,
					code:_this.yanzhengma,
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if(response.data.status == 200){
						alert('이체 성공');
						// _this.getInfo()
						_this.showModel = false
					}
					if (response.data.status == 600) {
						alert(response.data.message);
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			
			// 转账
			zhuanzhang(){
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/transfer/transfer_account', {
					price: _this.zNum,
					user_no: _this.zId,
					email:_this.email,
					code:_this.yanzhengma,
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if(response.data.status == 200){
						alert('이체 성공');
						_this.getInfo()
					}
					if (response.data.status == 600) {
						alert(response.data.message);
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			// 全部提取
			allIn() {
				this.withNum = this.info.now_usdt_pdt;
			},
			// 提现之前验证接口
			WithdrawalBefore(){
				var _this = this;
				// _this.loading = true;
				axios.post('https://admintest.pdt-daily.com/api/transfer/apply_withdrawal1', {
					price: _this.withNum,
					recipient: _this.address,
					email:_this.email,
					code:_this.yanzhengma,
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						console.log('验证通过')
						// _this.WithdrawalHash(response.data.data.res.hash, response.data.data.res.save_id);
						// _this.Withdrawal()
						_this.loading = false;
						_this.showModel = false
					}
					if (response.data.status == 600) {
						alert(response.data.message);
						_this.loading = false;
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			
			// 提现
			Withdrawal() {
				var _this = this;
				_this.loading = true;
				axios.post('https://admintest.pdt-daily.com/api/transfer/apply_withdrawal', {
					price: _this.withNum,
					recipient: _this.address,
					email:_this.email,
					code:_this.yanzhengma,
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.WithdrawalHash(response.data.data.res.hash, response.data.data.res.save_id);
					}
					if (response.data.status == 600) {
						alert(response.data.message);
						_this.loading = false;
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			// 提现hash
			WithdrawalHash(hash, save_id) {
				var _this = this;
				var timer = setInterval(() => {
					axios.post('https://admintest.pdt-daily.com/api/transfer/withdrawal_pdt', {
						hash: hash,
						save_id: save_id
					}, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'Access-Token': localStorage.getItem('token')
						}
					}).then(function(response) {
						console.log(response);
						if (response.data.status == 200) {
							_this.loading = false;
							clearInterval(timer);
							alert('인출 성공');
						}
						if (response.data.status == 301 || response.data.status == 302) {
							_this.loading = false;
							clearInterval(timer);
						}
					}).catch(function(error) {
						console.log(error);
					});
				}, 2000)
			},
			// 添加账户
			addAcount() {
				if (!this.next_account) {
					alert('현재 계정을 만들 수 없습니다.')
					return;
				}
				if (this.next_account == 1) {
					alert('구매 금액 부족')
					return;
				}
				this.showModel = true;
			},
			// 切换账号
			swichAccount(index) {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/change_account', {
					user_id: _this.accountList[index].user_id
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.allAccount = false;
						localStorage.setItem('token', response.data.data.token);
						_this.getInfo();
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			creatAccount() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/add_account', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.showModel = false;
						_this.getInfo();
					}
					if (response.data.status == 306) {
						alert(response.data.message);
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			getInfo() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/index/index', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.address = response.data.data.user_info.address;
						_this.info = response.data.data.data;
						_this.accountList = response.data.data.list;
						_this.next_account = response.data.data.data.next_account;
						_this.is_master = response.data.data.data.is_master;
						_this.indeData = response.data.data.user_info;
						_this.email=response.data.data.user_info.email;
					}
					if(response.data.status == 401){
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			logout() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/logout', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						alert('로그아웃 되었습니다.');
						localStorage.setItem('token', '');
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			// 获取邮箱验证码
			getCode() {
				var _that = this;
				if (!_that.email) {
					alert('이메일 입력하십시오.');
					return;
				}
				if(_that.type == 2){
					if(_that.zId == ''){
						alert('송금할 ID를 입력해주세요');
						return;
					}
					if(_that.zNum == ''){
						alert('송금할 수량을 입력해주세요');
						return;
					}
				}else{
					if(_that.withNum == ''){
						alert('출금 수량을 입력해주세요. ');
						return;
					}
					if(_that.address == ''){
						alert('출금 주소를 입력해주세요. ');
						return;
					}
				}
				_that.yanzhengma = ''
				_that.showModel = true;
				axios.post('https://admintest.pdt-daily.com/api/login/send_email1', {
					email: _that.email
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 400) {
						alert('올바른 메일박스를 입력하십시오.');
					}
					if (response.data.status == 200) {
						
					}
				}).catch(function(error) {
					console.log(error);
				});
			}
		},
	};
</script>